$heading-margin: 1.5rem 0 1rem;
$paragraph-margin: 1rem 0;
$block-margin: 1rem auto;
$block-padding: 1rem;
$block-border-radius: 0.5rem;
$inline-margin: 0rem 0.2rem;
$inline-padding: 0rem 0.2rem;
$inline-border-radius: 0.2rem;
$cell-padding: 0.2rem 0.5rem;

$serif-ff: serif;
$sans-ff: sans-serif;
$mono-ff: monospace;
$body-font: 1rem/1.6 $sans-ff;
$h1-font: bold 1.65rem/1.25 $sans-ff;
$h2-font: bold 1.375rem/1.25 $sans-ff;
$h3-font: bold 1.25rem/1.25 $sans-ff;
$h4-font: bold 1.125rem/1.25 $sans-ff;
$h5-font: bold 1rem/1.25 $sans-ff;
$h6-font: bold 0.875rem/1.25 $sans-ff;
$code-font: 0.75rem/1.6 $mono-ff;
$table-font: 0.85rem $sans-ff;

%block-container {
  display: block;
  overflow-x: auto;
}

%inline-block-container {
  display: inline-block;
  vertical-align: bottom;
  overflow-x: auto;
  max-width: 100%;
}

/*****************
 * markdown body *
 *****************/

.mdb {
  box-sizing: border-box;
  padding: 1rem;
  font: $body-font;
  text-align: start;
  /* https://stackoverflow.com/questions/3226001/some-font-sizes-rendered-larger-on-safari-iphone */
  -webkit-text-size-adjust: none;

  /* Headings */

  h1, h2, h3, h4, h5, h6 {
    margin: $heading-margin;
  }

  h1 { font: $h1-font; }
  h2 { font: $h2-font; }
  h3 { font: $h3-font; }
  h4 { font: $h4-font; }
  h5 { font: $h5-font; }
  h6 { font: $h6-font; }

  /* Paragraphs */

  p {
    margin: $paragraph-margin;
  }

  /* Emphasis */

  strong {
    color: inherit;
    font-weight: bold;
  }

  em {
    color: inherit;
    font-style: italic;
  }

  /* Blockquotes */

  blockquote {
    font: $body-font; /* 冗余 */
    margin: $paragraph-margin;
    padding: 1px 1rem;
  }

  /* Lists */

  ul, ol {
    margin: $paragraph-margin;
    padding-left: 1.5rem;
  }

  ul {
    list-style-type: disc;
  }

  ul, ol {
    ul {
      list-style-type: square;
    }
  }

  ul, ol {
    ul, ol {
      ul {
        list-style-type: circle;
      }
    }
  }

  ol {
    list-style-type: decimal;
  }

  ul, ol {
    ol {
      list-style-type: lower-roman;
    }
  }

  ul, ol {
    ul, ol {
      ol {
        list-style-type: lower-alpha;
      }
    }
  }

  li, li > p {
    margin: 0.5rem 0;
  }

  /* Horizontal Rules */

  hr {
    margin: 2rem 0;
    border: 0;
    height: 0.15rem;
  }

  /* Links */

  a {
    display: inline;
    text-decoration: none;
    cursor: pointer;
  }

  /* Superscript/Subscript */

  sup, sub {
    /* 不要让 sup/sub 影响 line-height */
    /* https://stackoverflow.com/a/6594576 */
    line-height: 100%;
  }

  /* Footnotes */

  .footnote-ref {
    sup {
      &:before {
        content: '[';
      }
      &:after {
        content: ']';
      }
    }
  }

  /* Definition Lists */

  dl {
    margin: $paragraph-margin;
  }

  dt {
    display: flex;
    align-items: center;
    font-weight: bold;
  }

  dd {
    margin: $block-margin;
    padding: $block-padding;
    border-radius: $block-border-radius;
  }

  /* Images */

  img, svg[data-inject-url$=".embed.svg"] {
    /* 图片其实是可以 inline 到诸如 <p> <a> 里头的，但这里都统一成 block */
    display: block;
    max-width: 100%;
    margin: $block-margin;
  }

  img[src$=".embed.svg"] {
    /* https://github.com/iconfu/svg-inject#how-does-svginject-prevent-unstyled-image-flash */
    display: none;
  }

  figure {
    @extend %block-container;
    margin: 0 auto;
  }

  figure figcaption {
    text-align: center;
    font-size: 0.8rem;
    font-style: italic;
    font-weight: bold;
    opacity: 0.5;
  }

  /* Code */

  pre[class*=language-] {
    @extend %block-container;
    margin: $block-margin;
    padding: $block-padding;
    border-radius: $block-border-radius;

    /* code 是未着色之前，code[class*=language-] 是着色之后 */
    code, code[class*=language-] {
      @extend %block-container;
      font: $code-font;
      margin: 0;
      padding: 0;
    }

    /* safari 下貌似如果指定了 word-break: break-word 的话（微信公众号就设置了，还 !important），
     * pre code 还是会 wrap，目前用的方法是：将 code 里面的 space 转成 nbsp，换行符转成 <br>，
     * 这样不会因为 css 的样式影响其排版，然后下面这里 white-space 设成 nowrap 强制其不要换行
     */
    code[class*=language-] {
      white-space: nowrap;
    }

  }

  :not(pre) > code[class*=language-] {
    margin: $inline-margin;
    padding: $inline-padding;
    border: 0.2rem solid;
    border-radius: $inline-border-radius;
    /* inline code 如果过长应当 wrap */
    white-space: pre-wrap;
  }

  /* Math */

  mjx-container[jax="SVG"] {
    &[display="true"] {
      @extend %block-container;
      margin: $block-margin;
      padding: $block-padding;
      text-align: center;
      border-radius: $block-border-radius;
    }

    &:not([display="true"]) {
      @extend %inline-block-container;
      margin: $inline-margin;
      padding: $inline-padding;
      border-radius: $inline-border-radius;
    }
  }

  /* Tables */

  .table-container {
    @extend %block-container;
    margin: $block-margin;
    max-width: fit-content;
    white-space: nowrap;

    table {
      margin: 0;
      border: 0;
      border-collapse: collapse;

      th, td {
        font: $table-font;
        padding: $cell-padding;
      }
    }
  }

  /* Special div */
  div.proof {
    /* div 本身就是 block 的，这里显式写出来是为了 inline css 时也能带上 */
    display: block;

    .proof-label {
      display: flex;
      align-items: center;
      justify-content: start;
      margin: $paragraph-margin;
      font-weight: bold;
      cursor: pointer;

      &:before {
        padding-right: 0.4rem;
        font-size: 0.7rem;
      }

      &:not(.collapse) {
        &:before {
          content: '\25BC';
        }
      }

      &.collapse {
        &:before {
          content: '\25B6';
        }
      }
    }

    .proof-label.collapse + .proof-content {
      display: none;
    }

    .proof-content {
      display: block;
      /* 下面两行用于在右下角（border 处）画一个 tombstone 用于标识 Q.E.D. */
      border-right: 0.8rem solid transparent;
      background: border-box no-repeat linear-gradient(currentColor, currentColor) right bottom/0.4rem 0.8rem;

      ol {
        li {
          list-style-type: decimal;
        }
      }
    }

  }

}
